//登录成功后显示用户名
let username = localStorage.getItem("username")
if (username != null) {
  console.log(username)
  let usernameStr = username.substring(0, 3)
  let headerLohin = document.querySelector(".headerLohin")
  let login = `
<span>欢迎登录，${usernameStr}</span>
<i>|</i>
<a href="./login.html" id='logout'>注销登录</a>
`
  headerLohin.innerHTML = login
}

//注销
if (username != null) {
  let logout = document.querySelector("#logout")
  logout.addEventListener("click", function () {
    localStorage.removeItem("username")
  })
}

//加鼠标移入移出事件
let lists = document.querySelectorAll(".headerNav_left li")
console.log(lists)
lists.forEach(function (v) {
  v.onmouseover = function () {
    console.log(this)
    this.classList.add("listAll")
    console.log(this.firstElementChild)
    this.firstElementChild.style.color = "#ff6699"
  }
  v.onmouseout = function () {
    this.classList.remove("listAll")
    this.firstElementChild.style.color = "#555"
    lists[0].firstElementChild.style.color = "#ff6699"
    // console.log(lists[0])
  }
})
let bannerUrl = `https://api5.hanfuhui.com/Poster/GetPosterInfoListForCode?code=gou_banner&count=6`
// let code = gou_banner
// let count = 4
let p = axios.get(bannerUrl)
p.then(function (r) {
  console.log(r)
  let banner = r.data.Data
  console.log(banner)
  let bannerAll = banner.map(
    (v) =>
      `
     <div class="swiper-slide" style="transition: all 0.5"> <a href="${v.Link}"><img src="${v.ImgSrc}" alt=""></a></div>
    `
  )
  console.log(bannerAll)
  document.querySelector(".swiper-wrapper").innerHTML = bannerAll.join("")
  //轮播图
  var mySwiper = new Swiper(".swiper", {
    loop: true, // 循环模式选项
    autoplay: {
      delay: 2000,
      pauseOnMouseEnter: true,
      disableOnInteraction: false,
    },
    effect: "fade",
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  })
  //鼠标覆盖停止自动切换
  mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop()
  }
  //鼠标离开开始自动切换
  mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start()
  }
  //鼠标移出隐藏按钮，移入显示按钮
  mySwiper.el.onmouseover = function () {
    mySwiper.navigation.$nextEl.removeClass("hide")
    mySwiper.navigation.$prevEl.removeClass("hide")
  }
  mySwiper.el.onmouseout = function () {
    mySwiper.navigation.$nextEl.addClass("hide")
    mySwiper.navigation.$prevEl.addClass("hide")
  }
})

//本周热卖
let hotUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
let pagenum = 2
let pagesize = 8
let uid = localStorage.getItem("id")
let p1 = axios.get(hotUrl, { params: { pagenum: 10, pagesize: 8, uid } })
p1.then(function (r) {
  // console.log(r.data.data)
  let hotList = r.data.data.map(
    (v) =>
      `
      <li>
      <a href="./particulars.html?id=${v.pid}"><img src="${
        v.pimg + "_250x250.jpg"
      }" alt="" /></a>
      <p class="price"><i>￥</i>${v.pprice}</p>
      <p class="name"><a href="./particulars.html?id=${v.pid}">${
        v.pdesc
      }</a></p>
    </li>
      `
  )
  document.querySelector(".hotSaleList").innerHTML = hotList.join("")
})

//汉服女装
let girlUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
axios(girlUrl, { params: { pagenum: 8, pagesize: 8, uid } }).then(function (r) {
  // console.log(r.data.data)
  let girlArr = r.data.data
  let girlStr = girlArr.map(
    (v) => `
    <li>
    <a href="./particulars.html?id=${v.pid}"><img src="${
      v.pimg + "_250x250.jpg"
    }" alt="" /></a>
    <p class="price"><i>￥</i>${v.pprice}</p>
    <p class="name"><a href="./particulars.html?id=${v.pid}">${v.pdesc}</a></p>
  </li>
    `
  )
  document.querySelector(".girlGosList").innerHTML = girlStr.join("")
})
//   //汉服男装
let manUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
axios(manUrl, { params: { pagenum: 6, pagesize: 8, uid } }).then(function (r) {
  let manArr = r.data.data
  let manStr = manArr.map(
    (v) => `
    <li>
    <a href="./particulars.html?id=${v.pid}"><img src="${
      v.pimg + "_250x250.jpg"
    }" alt="" /></a>
    <p class="price"><i>￥</i>${v.pprice}</p>
    <p class="name"><a href="./particulars.html?id=${v.pid}">${v.pdesc}</a></p>
  </li>
    `
  )
  document.querySelector(".manGosList").innerHTML = manStr.join("")
})

//   //汉元素
let hanElementsUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
axios(manUrl, { params: { pagenum: 4, pagesize: 8, uid } }).then(function (r) {
  let hanElementsArr = r.data.data
  let hanElementsStr = hanElementsArr.map(
    (v) => `
    <li>
    <a href="./particulars.html?id=${v.pid}"><img src="${
      v.pimg + "_250x250.jpg"
    }" alt="" /></a>
    <p class="price"><i>￥</i>${v.pprice}</p>
    <p class="name"><a href="./particulars.html?id=${v.pid}">${v.pdesc}</a></p>
  </li>
    
    `
  )
  document.querySelector(".hanElementsList").innerHTML = hanElementsStr.join("")
})

//   //汉服童装
let hanchildUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
axios(manUrl, { params: { pagenum: 2, pagesize: 8, uid } }).then(function (r) {
  let hanchildArr = r.data.data
  let hanchildStr = hanchildArr.map(
    (v) => `
  <li>
  <a href="./particulars.html?id=${v.pid}"><img src="${
      v.pimg + "_250x250.jpg"
    }" alt="" /></a>
  <p class="price"><i>￥</i>${v.pprice}</p>
  <p class="name"><a href="./particulars.html?id=${v.pid}">${v.pdesc}</a></p>
</li>
  
  `
  )
  document.querySelector(".hanchildList").innerHTML = hanchildStr.join("")
})

//   //周边配饰
let hanAccUrl = `http://jx.xuzhixiang.top/ap/api/allproductlist.php`
axios(manUrl, { params: { pagenum: 0, pagesize: 8, uid } }).then(function (r) {
  let hanAccArr = r.data.data
  let hanAccStr = hanAccArr.map(
    (v) => `
    <li>
    <a href="./particulars.html?id=${v.pid}"><img src="${
      v.pimg + "_250x250.jpg"
    }" alt="" /></a>
    <p class="price"><i>￥</i>${v.pprice}</p>
    <p class="name"><a href="./particulars.html?id=${v.pid}">${v.pdesc}</a></p>
  </li>
    
    `
  )
  document.querySelector(".hanAccList").innerHTML = hanAccStr.join("")
})

//热门品牌

//回到顶部
var btn = document.querySelector("#toTop")
window.onscroll = function () {
  // console.log(document);
  // console.log(document.documentElement.scrollTop) //垂直方向滚动的距离 像素
  // console.log(document.documentElement.scrollLeft) //水平方向滚动的距离 像素
  if (document.documentElement.scrollTop > 500) {
    btn.style.opacity = "1"
  } else {
    btn.style.opacity = "0"
  }
}
btn.onclick = function () {
  // document.documentElement.scrollTop = 0;//
  document.documentElement.scrollTo({
    top: 0,
    //滚动的行为平滑
    behavior: "smooth",
  })
}
//购物车
let goosCar = document.querySelector(".goods")
goosCar.addEventListener("click", function () {
  location.href = "goodsCar.html"
})
function goodsCar() {
  let carUrl = `http://jx.xuzhixiang.top/ap/api/cart-list.php`
  let id = localStorage.getItem("id")
  axios.get(carUrl, { params: { id } }).then(function (r) {
    console.log(r.data.data)
    let num = r.data.data.length
    console.log(length)
    let goodsNum = document.querySelector(".goodsNum")
    goodsNum.innerHTML = num
  })
}
goodsCar()
// // 导出
// let goodsCar = {}
// export { goodsCar }
